<template>
  <div class="todo-item">
    <input type="checkbox" v-model="isCompleted" />
    <span :class="{ completed: isCompleted }">{{ todo.text }}</span> <!-- 确保动态绑定 completed 类 -->
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  computed: {
    isCompleted: {
      get() {
        return this.todo.completed; // 确保从父组件传递的状态正确
      },
      set(value) {
        this.$emit('toggle-completion', this.todo.id); // 确保触发父组件方法更新状态
      }
    }
  },
  methods: {
    removeTodo() {
      this.$emit('remove-todo', this.todo.id);
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.completed {
  text-decoration: line-through; /* 文字中间加一条横线 */
}
</style>
